<template>
  <div class="main">
    <input v-model.trim="val" type="text" class="input" @keyup.enter="search" />
    <!-- 列表组件 -->
    <!-- 父传子：父传子属性
         <子组件标签 :属性名="属性值"  />
         子组件内： props:['属性名']
         单向数据流：子组件内不可修改父组件传入的值（规范）
                    父传子的props的值是只读属性,不可修改，
                    但是vue2老版本项目内，eslint并没有很强限制
                       基本数据类型不可修改，复杂数据数据类型，只要不修改栈就可以了
                       栈不可修改
          子传父（子触发父的方法）
             <子组件标签   @方法名="父组件方法"    />
             子组件内触发  this.$emit('方法名',实参值)             
     -->
    <HmList
      :list="list"
      :xxx="xxx"
      @xxxfn="sonToAppFn"
      @sonGetUrl="getUrl"
    ></HmList>
    <audio :src="musicUrl" controls autoplay></audio>
  </div>
</template>
<script>
import HmList from '@/components/HmList.vue'
import axios from 'axios'
export default {
  components: {
    HmList
  },
  data () {
    return {
      val: '',
      list: [],
      musicUrl: '',
      xxx: {
        num: 1
      }
    }
  },
  created () {},
  methods: {
    async search () {
      if (this.val !== '') {
        const res = await axios({
          url: `http://119.91.150.211:9000/search?keywords=${this.val}`
        })
        this.list = res.data.result.songs
        console.log(res)
      }
    },
    sonToAppFn (str) {
      console.log('sonToAppFn', str)
    },
    // 获取歌曲url
    async getUrl (id) {
      const res = await axios({
        url: `http://119.91.150.211:9000/song/url?id=${id}`
      })
      this.musicUrl = res.data.data[0].url
      console.log(res)
    }
  }
}
</script>
<style>
.main {
  width: 800px;
  margin: 50px auto;
}
.input {
  width: 100%;
  height: 40px;
}
</style>
